<template>
    <div id="app">
        <div class="add">
            编号:<input type="text" v-model="code">
            品牌名称:<input type="text" v-model="productName">
            <br>
            产品图片地址:<input type="text" v-model="imgSrc">

            价格:<input type="text" v-model="price">
            <input type="button" value="添加" @click="add">
        </div>

        <div class="add">
            品牌名称:<input type="text" placeholder="请输入搜索条件">
        </div>
        <div>
         <table class="tb">
            <tr>
                <th>
                    <input type="checkbox" v-model="allCheck" @change="allCheckChange">
                    全选
                </th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="(item,index) of products" :key="index.id">
                <td>
                    <input type="checkbox" v-model="checks" :value="item">
                </td>
                <td>
                    <img width="100" height="100" :src="item.imgSrc" alt="">
                </td>
                <td>{{item.code}}</td>
                <td> {{item.productName}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="decrease(item)"  :disabled="item.count===1">-</button>&nbsp;{{item.count}}&nbsp;
                    <button @click="increase(item)">+</button>
                </td>
                <td>
                    <button @click='del(index)'>删除</button>
                </td>

            </tr>

            </table>
            <div class="add" style="text-align: center;" v-show="!products.length">没有更多数据了</div>
            <h1 class="add" style="text-align:right">总价格:{{total}}</h1>

        </div>
        
    
    
    
    
    
    </div>
    
</template>
<script>
// 封装本地存储的方法
    let local={
        get(key){
            return JSON.parse(localStorage.getItem(key))
        },
        set(key,value){
            localStorage.setItem(key,JSON.stringify(value))
        }
    }


    // 初始数据
    let initialData =([
                    {
                        id:1,
                        code:1,
                        imgSrc: 'https://img0.baidu.com/it/u=733966098,1215176277&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                        productName:"喜喜",
                        price:90,
                        count:1,
                        cheked:false

                    

                    },
                    {
                        id:2,
                        code:2,
                        imgSrc:'https://img2.baidu.com/it/u=2677130232,3297202898&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1083',
                        productName:"哈哈",
                        price:70,
                        count:1,
                        cheked:false
                    
                    },
                    {
                        id:3,
                        code:3,
                        imgSrc:'https://img1.baidu.com/it/u=249788639,1059575476&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
                        productName:"嘿嘿",
                        price:28,
                        count:1,
                        cheked:false

                    }
                ])

    export default{
        data(){
            return{
                // 全选的值
                allCheck:false,
                checks:[],
                code:'',
                productName:"",
                imgSrc:'',
                price:"",
                products:local.get('aa')??initialData
            }
        },
        computed:{
             total() {
                let res = this.checks.reduce((total, item) => {
                    return total += item.price * item.count
                }, 0)
                return res.toFixed(2)
            },

        },
       
        watch:{
            checks(newChecks){
                if(newChecks.length===this.products.length){
                    this.allCheck=true;
                }else{
                    this.allCheck=false;
                }
            }
        },
        methods:{
            increase(number){
                number.count++
            },
            decrease(number){
                number.count--
            },
            // 全选box
            allCheckChange(){
                console.log(this.allCheck)
                if(this.allCheck){
                    // 全部勾选
                    this.checks=this.products
                }else{
                    this.checks=[]
                }
            },
            del(index){
                console.log(index)
                let target = this.products.splice(index,1)

                local.set("aa",this.products)
                console.log(target)

                 this.checks = this.checks.filter(item => item.id !== target[0].id)
            

            },
            add(){
                // 非空校验
                if(!this.code||!this.imgSrc||!this.price||!this.productName){
                    return
                }
                 let obj = {
                     id: Math.random().toString(32).substring(2),
                     imgSrc:this.imgSrc,
                     code:this.code,
                     productName:this.productName,
                     count:1,
                     price:this.price

               }
            //    添加到数组中
            this.products.push(obj)
            // 将products整个数据存到本地
            local.set('aa',this.products)
         


            }
           
        
        
        },
      
    }
   

</script>
<style>
    #app {
        width: 600px;
        margin: 10px auto;
    }

    .tb {
        border-collapse: collapse;
        width: 100%;
    }

    .tb th {
        background-color: pink;
        color: white;
    }

    .tb td,
    .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
    }

    .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
    }
</style>
